<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/store'

const siteStore = useAppStore()

const swiperList = computed(() => siteStore.siteInfo.bannerInfo || []);

</script>

<template>
    <div class='homeSwiper'>
        <swiper class="swiper" indicator-dots autoplay circular :interval="10000" easing-function="easeInCubic"
            indicator-active-color="#FFF">
            <swiper-item :current="current" class="swiper_item" v-for="item of swiperList" @click="swiperClick(item)"
                :key="item.id">
                <img :src="item?.bannerUrl" mode="aspectFill" class="swiper_img" alt="">
            </swiper-item>
        </swiper>
    </div>
</template>

<style lang='scss' scoped>
.homeSwiper {
    .swiper {
        height: 320rpx;

        .swiper_item {
            height: 100%;

            .swiper_img {
                width: 100%;
                height: 100%;
                border-radius: 15rpx;
            }
        }

    }
}
</style>